<template>
	<view class="weiixn-login">
		<view class="avatar">
			<open-data type="userAvatarUrl"></open-data>
		</view>
		<view class="userName">
			<open-data type="userNickName"></open-data>
		</view>
		<view class="text">
			كىرىش كونۇپكىسىنى باسقاندىن كېيىن، كىنوخانىمىزدا نۇرمال مەشغۇلات قىلالايسىز قېنى مەرھەمەت !
		</view>
		<view class="login">
			<view class="confirm" @click="handleConfirm">كىرىمەن</view>
			<view class="cencel" @click="handleCencel">كىرمەيمەن</view>
		</view>
	</view>
</template>

<script>
	import {
		loginApi
	} from '@/api/login.js'
	import {
		getCode
	} from '@/scripts/compatible/weixinCode.js'
	import {
		getUserProfile
	} from '@/scripts/compatible/weixinUserProfile.js'
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'
	export default {
		methods: {
			async handleConfirm() {
				this.$emit('setLoading', true)

				// 1.获取code
				const codeRes = await getCode()
				if (!codeRes) return
				uni.setStorageSync("code", codeRes.code)

				// 2.请求登录接口
				const res = await loginApi()
				uni.showToast({
					icon: res ? 'success' : 'error',
					title: res ? (res.data.msg || '登录成功') : '请求失败',
					complete: () => {
						if (res) {
							uni.setStorageSync('userInfo', res.data.data)
							uni.setStorageSync('token', res.data.data.Token.user_token)
							navigateBack()
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			handleCencel() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.weiixn-login {
		.avatar {
			height: 64px;
			width: 64px;
			border-radius: 50%;
			margin: 120px auto 0;
			overflow: hidden;
		}

		.userName {
			height: 36px;
			line-height: 36px;
			text-align: center;
		}

		.text {
			direction: rtl;
			padding: 15px;
			color: #999;
		}

		.login {
			padding: 24px 15px;
			display: flex;
			justify-content: center;
			font-size: 16px;
			flex-direction: row-reverse;

			.confirm {
				height: 46px;
				border-radius: 23px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-image: linear-gradient(90deg, #2f71ff, #15aaff);
				color: #fff;
				width: 140px;
				margin-left: 30px;
			}

			.cencel {
				height: 46px;
				color: #777;
				background-color: #f8f8f8;
				border-radius: 23px;
				width: 120px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>